<template>
  <e-table
    ref="eTable"
    @getList="handleGetList"
    :tableData="tableData"
    :columns="columns"
    :loading="loading"
    :total="total"
  >
    <el-table-column
      slot="order"
      label="序号"
      type="index"
      :index="indexMethod"
      width="60"
      align="center"
    />
    <el-table-column slot="sort" label="排序" width="100" align="center">
      <template slot-scope="scope">
        <el-input
          style="width: 65px"
          :max="100"
          size="small"
          v-model="scope.row.evalItemOrder"
          @blur="handleOrderChange(scope.row)"
        />
      </template>
    </el-table-column>
    <el-table-column slot="rewardType" align="center" label="项目类型" width="80">
      <template slot-scope="scope">{{ scope.row.rewardOrientation === 1 ? '分' : '钱' }}</template>
    </el-table-column>
    <el-table-column slot="upAndLow" align="center" label="奖惩下限-上限" width="120">
      <template slot-scope="scope">
        <span
          :class="[ scope.row.rewardLowLimit && scope.row.rewardLowLimit > 0 ? 'green' : '', scope.row.rewardLowLimit && scope.row.rewardLowLimit < 0 ? 'red' : ''  ]"
        >{{ scope.row.rewardLowLimit || scope.row.rewardLowLimit === 0 ? scope.row.rewardLowLimit : '无下限' }}</span>
        -
        <span
          :class="[ scope.row.rewardUpLimit && scope.row.rewardUpLimit > 0 ? 'green' : '', scope.row.rewardUpLimit && scope.row.rewardUpLimit < 0 ? 'red' : ''  ]"
        >{{ scope.row.rewardUpLimit ? scope.row.rewardUpLimit : '无上限' }}</span>
      </template>
    </el-table-column>
    <el-table-column slot="evalTarget" align="center" label="考评对象" width="80">
      <template slot-scope="scope">{{ scope.row.evalTarget === 1 ? '科室' : '个人' }}</template>
    </el-table-column>
    <el-table-column slot="action" fixed="right" width="50" align="center">
      <template slot-scope="scope">
        <el-dropdown>
          <a class="el-dropdown-link">
            <i class="el-icon-menu"></i>
          </a>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-if="$auth('eval:update')"
              @click.native="handleEdit('edit', scope.row)"
            >
              <a>编辑</a>
            </el-dropdown-item>
            <el-dropdown-item
              v-if="$auth('eval:detail')"
              @click.native="handleEdit('detail', scope.row)"
            >
              <a>查看</a>
            </el-dropdown-item>
            <el-dropdown-item v-if="$auth('eval:delete')" @click.native="handleDelete(scope.row)">
              <a class="red">删除</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>
  </e-table>
</template>

<script>
import { getAll, itemQuery, itemDelete } from '@/api/eval'
import { orderChange, openNotification } from '@/utils/util'

export default {
  data() {
    return {
      queryParam: {
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      // 表头
      columns: [
        { slot: 'order' },
        {
          label: '考评分类',
          prop: 'evalTypeName',
          width: 150,
          tooltip: true
        },
        {
          label: '考评项目名称',
          prop: 'evalItemName',
          tooltip: true,
          align: 'left'
        },

        {
          label: '考评项目内容',
          prop: 'evalItemContent',
          tooltip: true,
          align: 'left'
        },
        {
          label: '考评标准',
          prop: 'standard',
          tooltip: true,
          align: 'left'
        },
        { slot: 'rewardType' },
        { slot: 'upAndLow' },
        {
          label: '考评奖惩标准',
          width: '110px',
          prop: 'rewardStandard',
          align: 'right'
        },
        {
          label: '申报项目',
          width: '50',
          formatter(row, column, cellValue, index) {
            return row.applyFlag ? '是' : '否'
          }
        },
        { slot: 'evalTarget' },
        { slot: 'sort' },
        { slot: 'action' }
      ],
      tableData: [],
      total: 1
    }
  },
  mounted() {
    this.handleGetList()
  },
  methods: {
    indexMethod(index) {
      return (this.queryParam.pageNo - 1) * this.queryParam.pageSize + index + 1
    },
    async handleOrderChange(row) {
      const res = await orderChange(row, 'evalItemOrder', 'evalItemId', 'item', '/eval/')
      if (res.state === '000000') {
        this.handleGetList()
      }
    },
    handleDelete(row) {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${row.evalItemName}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await itemDelete(row.evalItemId, {})
          openNotification('success', '删除成功')
          _this.handleGetList()
        }
      })
    },
    handleEdit(bool, obj) {
      this.$emit('edit', bool, obj)
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await itemQuery(this.queryParam)
      if (res && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    }
  }
}
</script>